<!DOCTYPE HTML>
<html class="allC">
<head>
<meta charset="UTF-8"/>
<meta http-equiv="Cache-Control" content="no-cache"/>
<meta content="telephone=no" name="format-detection" />
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
<meta name="keywords" content="#" />
<meta name="description" content="#" />

<head>
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta http-equiv="content-type" content="text/html;charset=utf-8">
	<title>动态画一个圆环</title>
	<style>
		.circle {
			width: 150px; height: 150px;
			border-radius: 50%;
			position: relative;
			overflow: hidden;
			transition: clip-path .2s;
			-webkit-mask: radial-gradient(transparent, transparent 65px, #e44746 65px);
			mask: radial-gradient(transparent 65px, #e44746 65px);
		}
		.circle-group {
			width: 100%; height: 100%;
			position: absolute;
			left: 0; top: 0;	
			-webkit-filter: blur(20px);
			filter: blur(20px);
			transform: scale(1.2);
		}
		.circle-group i {
			width: 100%; height: 100%;
			clip: rect(0 150px 150px 75px);
			position: absolute;
			overflow: hidden;
		}
		.circle-group i::after {
			content: '';
			width: 100%; height: 100%;
			background: currentColor;
			position: absolute;
			clip: rect(0 75px 150px 0);
			transform: rotate(91deg);
			border-radius: 50%;
		}
		
		.circle-group i:nth-of-type(1) {
			transform: rotate(0);
			color: #f04f4f;	
		}
		.circle-group i:nth-of-type(2) {
			transform: rotate(36deg);
			color: #ea4d3e;	
		}
		.circle-group i:nth-of-type(3) {
			transform: rotate(72deg);
			color: #f36029;	
		}
		.circle-group i:nth-of-type(4) {
			transform: rotate(108deg);
			color: #f3731a;	
		}
		.circle-group i:nth-of-type(5) {
			transform: rotate(144deg);
			color: #ed7e1b;	
		}
		.circle-group i:nth-of-type(6) {
			transform: rotate(180deg);
			color: #d58923;	
		}
		.circle-group i:nth-of-type(7) {
			transform: rotate(216deg);
			color: #939d3e;	
		}
		.circle-group i:nth-of-type(8) {
			transform: rotate(265deg);
			color: #4ebb38;
		}
		</style>
</head>

<body>
	<div id="circle" class="circle">
		<div class="circle-group">
			<i></i><i></i><i></i><i></i><i></i>
			<i></i><i></i><i></i>
		</div>
	</div>

</body>

</html>